<template>
	<view class="page">
		<free-nav-bar title="二维码名片" showBack :showRight="false"></free-nav-bar>
		
		<view class="p-5">
			<view class="bg-white rounded p-4">
				<view class="flex align-center mb-4">
					<free-avater :src="detail.avatar || '/static/images/demo/demo6.jpg'"></free-avater>
					<view class="pl-4 flex flex-column">
						<text class="font-md">{{detail.name}}</text>
						<!-- <text class="font text-light-muted">地区</text> -->
					</view>
				</view>
				
				<view class="flex flex-column align-center justify-center">
					<image :src="src" class="bg-secondary mb-4" 
					style="width: 550rpx; height: 550rpx;"></image>
					<text class="font text-light-muted">扫扫上面的二维图案, 加我的仿微信</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import { mapState } from 'vuex';
	import $C from '@/common/free-lib/config.js';
	export default {
		data() {
			return {
				detail:{
					id:0,
					name:'',
					avatar:''
				},
				// 二维码路径
				src:''
			}
		},
		onLoad(e) {
			if(e.params){
				this.detail = JSON.parse(decodeURIComponent(e.params))
				this.src = `${$C.baseUrl}/${e.type}_qrcode/${this.detail.id}?token=${this.user.token}`
			}
		},
		methods: {
			
		},
		computed:{
			...mapState({
				user: state=>state.user.user
			}),
		},
		components:{
			freeNavBar,
			freeAvater
		}
	}
</script>

<style>

</style>
